<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>注册表单验证</title>
		<script src="./../bag.js"></script>
		<style type="text/css">
			.errInfo{color: red; font-size: 12px;}
			.errInfo img{ vertical-align:middle;}
		</style>

	</head>
	<body>
		<form action="Demo12_01.html" >
		<table width="1000" align="center">
			<caption>用户注册</caption>
			<tr>
				<td width="300" align="right" height="30">用户名:</td>
				<td width="700"><input type="text" id="txtAccount" >
					<span id="spanAccount" class="errInfo"></span>
				</td>
			</tr>
			<tr>
				<td width="300" align="right" height="30">密码:</td>
				<td width="700"><input type="password" id="txtPwd" >
					<span id="spanPwd" class="errInfo"></span>
				</td>
			</tr>
			<tr>
				<td width="300" align="right" height="30">密码确认:</td>
				<td width="700"><input type="password" id="txtPwdOk">
					<span id="spanPwdOk" class="errInfo"></span>
				</td>
			</tr>
			<tr>
				<td width="300" align="right" height="30">性别:</td>
				<td width="700">
					<input type="radio" name="sex" id="rdBoy" value="男" >男
					<input type="radio" name="sex" id="rdGirl" value="女" >女	
					<span id="spanSex" class="errInfo"></span>
				</td>
			</tr>
			<tr>
				<td width="300" align="right" height="30">专业:</td>
				<td width="700">
					<select id="selProfessional" >
						<option value="">--请选择--</option>
						<option value="软件开发">软件开发</option>
						<option value="电子商务">电子商务</option>
						<option value="国际贸易">国际贸易</option>
						<option value="工商管理">工商管理</option>
						<option value="高级护理">高级护理</option>
					</select>
					<span id="spanProfessional" class="errInfo"></span>
				</td>
			</tr>			
			<tr>
				<td width="300" align="right" height="30">爱好:</td>
				<td width="700" >
					<input type="checkbox" name="hobby" value="抽烟" >抽烟
                    <input type="checkbox" name="hobby" value="喝酒" >喝酒
					<input type="checkbox" name="hobby" value="打游戏" >打游戏
					<input type="checkbox" name="hobby" value="烫头发" >烫头发
					<input type="checkbox" name="hobby" value="足球" >足球
					<input type="checkbox" name="hobby" value="篮球" >篮球
					<span id="spanHobby" class="errInfo"></span>
				</td>
			</tr>
			<tr>
				<td width="300" align="right" height="30">自我介绍:</td>
				<td width="700">
					<textarea id="mySelf" rows="10" cols="60"></textarea>
				</td>
			</tr>
			<tr>
				<td width="300" align="right" height="30">&nbsp;</td>
				<td width="700">
					<input type="submit" value="注册" />
					<input type="reset" value="取消" />
				</td>
			</tr>
		</table>
		
		</form>	
		<script type="text/javascript">
		$('#txtAccount').blur(user)
		function user(){
			var $input = $('#txtAccount').val()
			if ($input.length<6&&$input.length>0) {
				$('#spanAccount')[0].innerHTML='不到六位数'
				return false
			}else if($input.length==0){
				$('#spanAccount')[0].innerHTML='不能为空'
				return false
			}else{
				$('#spanAccount')[0].innerHTML=''
			}
		}
		
		$('#txtPwd').blur(txtPwd)
		function txtPwd (){
			var txt = $('#txtPwd').val()
			if (txt.length<8&&txt.length>0) {
				$('#spanPwd').html('密码长度不足八位')
                return false
			}else if(txt.length==0){
				$('#spanPwd').html('密码不能为空')
                return false
            }else{
                $('#spanPwd').html('')
            }
		}


		$('#txtPwdOk').blur(txtPwdOk)
		function txtPwdOk () {
			var txtok = $('#txtPwdOk').val()
			var txt = $('#txtPwd').val()
			if (txtok!=txt) {
				$('#spanPwdOk').html('两次密码不同')
                $('#txtPwdOk').val('')
                return false
			}else{
                $('#spanPwdOk').html('')
            }
		}
		


		$(':radio').attr('onclick','sexchose()')
		var sex
		function sexchose() {			
			var $radio = $(':radio')
			for (let i = 0; i < $radio.length; i++) {
				if ($radio[i].checked) {
					sex = $radio[i].value
					break
				}
			}
			console.log(sex);
		}



		$('#selProfessional').attr('onchange','Professional()')
		var selProfessional
		function Professional() {
			var sel = $('#selProfessional').val()
			selProfessional=sel
			console.log(selProfessional);
		}




		$(':checkbox').attr('onchange','checkbox()')
		var hobbies=''
		function checkbox() {
			var check = $(':checkbox')
			var text=''
			for (let i = 0; i < check.length; i++) {
				if (check[i].checked) {
					text+=check[i].value
					
				}
			}
			hobbies=text
			console.log(hobbies);
		}


		$('#mySelf').attr('onkeyup','text()')
		function text() {
			var txt= $('#mySelf')[0].value
			console.log(txt);
			if (txt.length>30) {
				// $('#myself')[0].value
				$('#mySelf')[0].value = txt.slice(0,30)
			
			}
		}


		$(':submit').eq(0).click(
			function(){
				var num=0
				if (sex==null) {
					$('#spanSex').html('没有选择性别')
                    num++
				}else{
                    $('#spanSex').html('')
                }
				if (selProfessional==null) {
					  $('#spanProfessional').html('没有选择专业')
                      num++
				}else{
                    $('#spanProfessional').html('')
                }
				if (hobbies=='') {
					  $('#spanHobby').html('没有选择爱好')
                      num++
				}else{
                    $('#spanHobby').html('')
                }
				if (user()==false) {
                    num++				
                }
				if (txtPwd()==false) {
                    num++				
                }
                if (txtPwdOk()==false) {
                    num++				
                }
                if (num!=0) {
                    return false
                }
				
			}
		)

		</script>	
	</body>
</html>